<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动效果</title>
    <style>
        .box {
            background-color: hotpink;
            /*1. 通过给父容器增加overflow hidden的方式来清除浮动*/
            /*overflow: hidden;*/
        }

        .left {
            float: left;
            width: 50%;
            background-color: lightcyan;
        }

        .right {
            float: left;
            width: 50%;
            background-color: lightgreen;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="left">
        <img src="./img1.jpg" alt="头像" width="100">
    </div>
    <div class="right">
        <div>昵称</div>
        <div>简介：</div>
    </div>
    <!--2. 通过在后面增加clear:both，可以清除掉前面的浮动效果-->
    <div style="clear: both"></div>
</div>

<!--浮动会脱离文档流, 清楚浮动-->
<div>
    后续的内容
</div>

</body>
</html>